@import "mixin_helpers";

$height: 24px;
$radius: 3px;

.ibutton-container {
  @include box-sizing(border-box);
  * {@include box-sizing(border-box);}
  position: relative;
  height: $height;
  cursor: pointer;
  overflow: hidden;
  /* set max width to that of sprite */
  max-width: 400px;
  /* prevent text selection */
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -moz-user-focus: ignore;
  -moz-user-input: disabled;
  /* set default width based on ON/OFF labels */
  width: 80px;
  input {
    position: absolute;
    top: 0;
    left: 0;
    /* hide the element */
    filter: alpha(opacity = 0);
    -moz-opacity: 0.0;
    opacity: 0.0;
    /* allow checking of input if visible */
    -moz-user-input: enabled  !important;
  }

  i {
    position: relative;
    top: -2px;
  }
}

.ibutton-handle {
  display: block;
  height: $height;
  cursor: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  background: red;
  z-index: 3;
  /* set default width based on ON/OFF labels */
  width: 30px;
}

.ibutton-handle-right {
  display: none;
  height: 100%;
  width: 100%;
  padding-right: 3px;
  background: blue;
  z-index: 3;
}

.ibutton-handle-middle {
  height: 100%;
  width: 100%;
  background: green;
  z-index: 3;
}

.ibutton-label-on, .ibutton-label-off {
  white-space: nowrap;
  font-size: 17px;
  line-height: 17px;
  font-weight: bold;
  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  cursor: inherit;
  display: block;
  height: 22px;
  position: absolute;
  width: auto;
  top: 0;
  overflow: hidden;
  height: $height;

  span {
    display: inline-block;
    text-align: center;
    position: absolute;
  }

  label {
    padding: 0;
    margin: 0;
    height: $height;
    line-height: $height + 2px;
  }
}

.ibutton-label-on {
  background: blue;
  color: #fff;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
  left: 0;
  z-index: 1;

  span {
    left: 0px;
    right: 4px;
  }
}

.ibutton-label-off {
  background: yellow;
  color: #7c7c7c;
  background-position: 100% 0;
  text-shadow: 0 -1px 2px rgba(153, 153, 153, 0.4);
  text-align: right;
  width: 100%;
  span {
    right: 0;
    padding-right: 6px;
  }
}

/* create an outline when button gets focus via keyboard */

.ibutton-container label {
  cursor: inherit;
  padding: 0px 3px;
  font-size: 1em !important;
}

.ibutton-focus {
  label {
    /* we must use border, since outline doesn't work in IE */
    border: 1px dotted #666 !important;
    padding: 0 2px;
  }
  div.ibutton-label-on span label {
    /* use white for more contrast */
    border-color: #fff !important;
  }
}

/* add padding to right/left so that text gets clipped before absolute edge */

.ibutton-padding-left, .ibutton-padding-right {
  display: none;
  position: absolute;
  top: 4px;
  z-index: 2;
  width: 3px;
  height: 20px;
}

.ibutton-padding-left {
  left: 0;
}

.ibutton-padding-right {
  right: 0;
  background-position: 100% -4px;
}

/* change the styles of the handle when being dragged */

/* styles to use when the button is disabled */

.ibutton-disabled {
  cursor: not-allowed !important;
  /* cursor options: default or not-allowed */
  .ibutton-handle {
    background-position: 0 -81px;
  }
  .ibutton-handle-right {
    background-position: 100% -81px;
  }
  .ibutton-handle-middle {
    background-position: 50% -81px;
  }
  div {
    &.ibutton-label-on {
      background-position: 0 -27px;
    }
    &.ibutton-label-off {
      background-position: 100% -27px;
    }
  }
  .ibutton-padding-left {
    background-position: 0 -27px;
  }
  .ibutton-padding-right {
    background-position: 100% -27px;
  }
  div {
    &.ibutton-label-on {
      color: #fff;
    }
    &.ibutton-label-off {
      color: #cbcbcb;
    }
  }
}

//skinning goes here

.ibutton-label-off, .ibutton-label-on {
  @include box-shadow(0px 0px 8px 0px rgba(0, 0, 0, .3) inset);
  label {
    color: white;
    @include text-shadow-bottom(#000);
  }
}

.ibutton-label-on {
  @include std-bg(#a5cae1, #7fb3d4);
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius);
}

.ibutton-label-off {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius);
  @include std-bg(#DC7E6F, #E49181);
}

.ibutton-handle {
  @include border-radius($radius);
  border: 1px solid #8F8F8F;
  @include std-bg(#fdfdfd, #ebebeb);
}

.ibutton-container {
  @include border-radius($radius);
  @include box-shadow(0 1px 0 rgba(255,255,255,.5));
}